<template>
    <div>
        <a-range-picker style="width: 200px;" :value="tempValue" @change="onChange" :disabled-date="disabledDate"
            format="YYYY-MM-DD">
        </a-range-picker>
    </div>
</template>
<script>
import moment from 'moment';
export default {
    name: 'ZsData',
    props: {
        onFormChange: {
            type: Function,
            default: () => { }
        },
        menuId: {
            type: [Number, String],
            default: 0
        },
        otherData: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            value: [],
            dateFormat: 'YYYY-MM-DD'
        }
    },
    methods: {
        disabledDate(current) {
            return current && moment(current).format('YYYY-MM-DD') > moment().format('YYYY-MM-DD');
        },
        onChange(a, b) {
            this.value = b;
            this.onFormChange({
                startTime: b[0],
                endTime: b[1],
            })
        }
    },
    computed: {
        tempValue() {
            let val = this.value;
            if (Array.isArray(val) && val.length == 2) {
                val[0] = moment(val[0], this.dateFormat)
                val[1] = moment(val[1], this.dateFormat)
            }
            return val;
        }
    },
    watch: {
        menuId: {
            handler() {
                this.value = null;
            },
            immediate: true,
            deep: true,
        },
        otherData: {
            handler(nVal, oVal) {
                if (nVal['endTime'] && nVal['startTime']) {
                    this.value = [nVal['startTime'], nVal['endTime'],];
                } else {
                    this.value = [];
                }
            },
            deep: true,
        }
    }
}
</script>
<style lang="less" scoped></style>